<template>
  <div class="vue3-cron-plus-container">
    <el-tabs type="border-card">
      <!-- 秒 -->
      <el-tab-pane>
        <template #label>
          <span><el-icon>
              <Calendar />
            </el-icon> 秒</span>
        </template>
        <div class="tabBody myScroller">
          <el-row>
            <el-radio v-model="state.second.cronEvery" label="every">每秒</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.second.cronEvery" label="cycle">
              周期从
              <el-input-number v-model="state.second.cycleFrom" :min="0" :max="59" />
              到
              <el-input-number v-model="state.second.cycleTo" :min="0" :max="59" />
              秒
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.second.cronEvery" label="interval">
              周期从
              <el-input-number v-model="state.second.intervalFrom" :min="0" :max="59" />
              秒开始，每
              <el-input-number v-model="state.second.intervalStep" :min="1" :max="59" />
              秒执行一次
            </el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="state.second.cronEvery" label="specific">
              指定
              <el-select multiple v-model="state.second.specificSpecific">
                <el-option v-for="sec in 60" :key="sec - 1" :value="(sec - 1).toString().padStart(2, '0')">
                  {{ (sec - 1).toString().padStart(2, '0') }}
                </el-option>
              </el-select>
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>

      <!-- 分钟 -->
      <el-tab-pane>
        <template #label>
          <span><el-icon>
              <Calendar />
            </el-icon> 分钟</span>
        </template>
        <div class="tabBody myScroller">
          <el-row>
            <el-radio v-model="state.minute.cronEvery" label="every">每分钟</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.minute.cronEvery" label="cycle">
              周期从
              <el-input-number v-model="state.minute.cycleFrom" :min="0" :max="59" />
              到
              <el-input-number v-model="state.minute.cycleTo" :min="0" :max="59" />
              分钟
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.minute.cronEvery" label="interval">
              周期从
              <el-input-number v-model="state.minute.intervalFrom" :min="0" :max="59" />
              分钟开始，每
              <el-input-number v-model="state.minute.intervalStep" :min="1" :max="59" />
              分钟执行一次
            </el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="state.minute.cronEvery" label="specific">
              指定
              <el-select multiple v-model="state.minute.specificSpecific">
                <el-option v-for="min in 60" :key="min - 1" :value="(min - 1).toString().padStart(2, '0')">
                  {{ (min - 1).toString().padStart(2, '0') }}
                </el-option>
              </el-select>
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>

      <!-- 小时 -->
      <el-tab-pane>
        <template #label>
          <span><el-icon>
              <Calendar />
            </el-icon> 小时</span>
        </template>
        <div class="tabBody myScroller">
          <el-row>
            <el-radio v-model="state.hour.cronEvery" label="every">每小时</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.hour.cronEvery" label="cycle">
              周期从
              <el-input-number v-model="state.hour.cycleFrom" :min="0" :max="23" />
              到
              <el-input-number v-model="state.hour.cycleTo" :min="0" :max="23" />
              小时
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.hour.cronEvery" label="interval">
              周期从
              <el-input-number v-model="state.hour.intervalFrom" :min="0" :max="23" />
              小时开始，每
              <el-input-number v-model="state.hour.intervalStep" :min="1" :max="23" />
              小时执行一次
            </el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="state.hour.cronEvery" label="specific">
              指定
              <el-select multiple v-model="state.hour.specificSpecific">
                <el-option v-for="hour in 24" :key="hour - 1" :value="(hour - 1).toString().padStart(2, '0')">
                  {{ (hour - 1).toString().padStart(2, '0') }}
                </el-option>
              </el-select>
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>

      <!-- 日 -->
      <el-tab-pane>
        <template #label>
          <span><el-icon>
              <Calendar />
            </el-icon> 日</span>
        </template>
        <div class="tabBody myScroller">
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="every">每日</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="unspecified">不指定</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="cycle">
              周期从
              <el-input-number v-model="state.day.cycleFrom" :min="1" :max="31" />
              到
              <el-input-number v-model="state.day.cycleTo" :min="1" :max="31" />
              日
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="interval">
              周期从
              <el-input-number v-model="state.day.intervalFrom" :min="1" :max="31" />
              日开始，每
              <el-input-number v-model="state.day.intervalStep" :min="1" :max="31" />
              日执行一次
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="workday">
              每月
              <el-input-number v-model="state.day.workday" :min="1" :max="31" />
              号最近的那个工作日
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.day.cronEvery" label="last">本月最后一天</el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="state.day.cronEvery" label="specific">
              指定
              <el-select multiple v-model="state.day.specificSpecific">
                <el-option v-for="day in 31" :key="day" :value="day.toString().padStart(2, '0')">
                  {{ day.toString().padStart(2, '0') }}
                </el-option>
              </el-select>
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>

      <!-- 月 -->
      <el-tab-pane>
        <template #label>
          <span><el-icon>
              <Calendar />
            </el-icon> 月</span>
        </template>
        <div class="tabBody myScroller">
          <el-row>
            <el-radio v-model="state.month.cronEvery" label="every">每月</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.month.cronEvery" label="unspecified">不指定</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.month.cronEvery" label="cycle">
              周期从
              <el-input-number v-model="state.month.cycleFrom" :min="1" :max="12" />
              到
              <el-input-number v-model="state.month.cycleTo" :min="1" :max="12" />
              月
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.month.cronEvery" label="interval">
              周期从
              <el-input-number v-model="state.month.intervalFrom" :min="1" :max="12" />
              月开始，每
              <el-input-number v-model="state.month.intervalStep" :min="1" :max="12" />
              月执行一次
            </el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="state.month.cronEvery" label="specific">
              指定
              <el-select multiple v-model="state.month.specificSpecific">
                <el-option v-for="month in 12" :key="month" :value="month.toString().padStart(2, '0')">
                  {{ month.toString().padStart(2, '0') }}
                </el-option>
              </el-select>
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>

      <!-- 周 -->
      <el-tab-pane>
        <template #label>
          <span><el-icon>
              <Calendar />
            </el-icon> 周</span>
        </template>
        <div class="tabBody myScroller">
          <el-row>
            <el-radio v-model="state.week.cronEvery" label="unspecified">不指定</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.week.cronEvery" label="weekly">每周</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.week.cronEvery" label="cycle">
              周期从星期
              <el-input-number v-model="state.week.cycleFrom" :min="1" :max="7" />
              到星期
              <el-input-number v-model="state.week.cycleTo" :min="1" :max="7" />
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.week.cronEvery" label="nth">
              第
              <el-input-number v-model="state.week.nthWeek" :min="1" :max="5" />
              周的星期
              <el-input-number v-model="state.week.nthDay" :min="1" :max="7" />
            </el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.week.cronEvery" label="last">
              本月最后一个星期
              <el-input-number v-model="state.week.lastDay" :min="1" :max="7" />
            </el-radio>
          </el-row>
          <el-row>
            <el-radio class="long" v-model="state.week.cronEvery" label="specific">
              指定
              <el-select multiple v-model="state.week.specificSpecific">
                <el-option v-for="day in 7" :key="day" :value="day.toString()">
                  星期{{ ['日', '一', '二', '三', '四', '五', '六'][day - 1] }}
                </el-option>
              </el-select>
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>

      <!-- 年 -->
      <el-tab-pane>
        <template #label>
          <span><el-icon>
              <Calendar />
            </el-icon> 年</span>
        </template>
        <div class="tabBody myScroller">
          <el-row>
            <el-radio v-model="state.year.cronEvery" label="unspecified">不指定</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.year.cronEvery" label="every">每年</el-radio>
          </el-row>
          <el-row>
            <el-radio v-model="state.year.cronEvery" label="cycle">
              周期从
              <el-input-number v-model="state.year.cycleFrom" :min="1970" :max="2099" />
              到
              <el-input-number v-model="state.year.cycleTo" :min="1970" :max="2099" />
              年
            </el-radio>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 表达式显示区域 -->
    <div class="expression-section">
      <div class="expression-header">
        <h3>&lt;/&gt; 表达式</h3>
      </div>

      <div class="expression-table">
        <el-table :data="[expressionData]" border>
          <el-table-column v-for="field in fields" :key="field.name" :prop="field.name" :label="field.label"
            align="center">
            <template #default="scope">
              <span class="field-value">{{ scope.row[field.name] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="cron-result">
        <div class="cron-expression-display">
          <strong>Cron表达式：</strong>
          <el-input v-model="state.generatedCron" />
        </div>
        <div class="error-message" v-if="state.errorMessage">
          <el-alert :title="state.errorMessage" type="error" :closable="false" />
        </div>
        <div class="action-buttons">
          <el-button type="primary" @click="generateCron">生成表达式</el-button>
          <el-button @click="parseCron">反解析</el-button>
          <el-button type="success" @click="copyCron">复制</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed } from "vue";
import { Calendar } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
// 建议添加类型定义
interface CronFieldConfig {
  cronEvery: string;
  cycleFrom: number;
  cycleTo: number;
  intervalFrom: number;
  intervalStep: number;
  specificSpecific: string[];
  workday?: number;
  nthWeek?: number;
  nthDay?: number;
  lastDay?: number;
}

interface CronState {
  second: CronFieldConfig;
  minute: CronFieldConfig;
  hour: CronFieldConfig;
  day: CronFieldConfig;
  month: CronFieldConfig;
  week: CronFieldConfig;
  year: CronFieldConfig;
  generatedCron: string;
  errorMessage: string;
}
// 提取常量
const CRON_OPTIONS = {
  SECOND: { min: 0, max: 59 },
  MINUTE: { min: 0, max: 59 },
  HOUR: { min: 0, max: 23 },
  DAY: { min: 1, max: 31 },
  MONTH: { min: 1, max: 12 },
  WEEK: { min: 1, max: 7 },
  YEAR: { min: 1970, max: 2099 }
} as const;

const CRON_EVERY_OPTIONS = {
  EVERY: 'every',
  CYCLE: 'cycle',
  INTERVAL: 'interval',
  SPECIFIC: 'specific',
  UNSPECIFIED: 'unspecified',
  WORKDAY: 'workday',
  LAST: 'last',
  NTH: 'nth',
  WEEKLY: 'weekly'
} as const;

const fields = [
  { name: 'second', label: '秒' },
  { name: 'minute', label: '分钟' },
  { name: 'hour', label: '小时' },
  { name: 'day', label: '日' },
  { name: 'month', label: '月' },
  { name: 'week', label: '周' },
  { name: 'year', label: '年' }
];

const state = reactive({
  // 秒配置
  second: {
    cronEvery: 'every',
    cycleFrom: 1,
    cycleTo: 2,
    intervalFrom: 0,
    intervalStep: 1,
    specificSpecific: ['00']
  },
  // 分钟配置
  minute: {
    cronEvery: 'every',
    cycleFrom: 1,
    cycleTo: 2,
    intervalFrom: 0,
    intervalStep: 1,
    specificSpecific: []
  },
  // 小时配置
  hour: {
    cronEvery: 'every',
    cycleFrom: 0,
    cycleTo: 2,
    intervalFrom: 0,
    intervalStep: 1,
    specificSpecific: []
  },
  // 日配置
  day: {
    cronEvery: 'every',
    cycleFrom: 1,
    cycleTo: 2,
    intervalFrom: 1,
    intervalStep: 1,
    workday: 1,
    specificSpecific: []
  },
  // 月配置
  month: {
    cronEvery: 'every',
    cycleFrom: 1,
    cycleTo: 2,
    intervalFrom: 1,
    intervalStep: 1,
    specificSpecific: []
  },
  // 周配置
  week: {
    cronEvery: 'unspecified',
    cycleFrom: 1,
    cycleTo: 2,
    nthWeek: 1,
    nthDay: 1,
    lastDay: 1,
    specificSpecific: []
  },
  // 年配置
  year: {
    cronEvery: 'unspecified',
    cycleFrom: 2018,
    cycleTo: 2019
  },
  generatedCron: '* * * * * ? *',
  errorMessage: ''
});

// 计算属性来判断只改变了某个字段
const isOnlyMinuteChanged = computed(() => {
  return state.minute.cronEvery !== 'every' &&
    state.second.cronEvery === 'every' &&
    state.hour.cronEvery === 'every' &&
    (state.day.cronEvery === 'every' || state.day.cronEvery === 'unspecified') &&
    (state.month.cronEvery === 'every' || state.month.cronEvery === 'unspecified') &&
    state.week.cronEvery === 'unspecified' &&
    (state.year.cronEvery === 'unspecified' || state.year.cronEvery === 'every');
});

const isOnlyHourChanged = computed(() => {
  return state.hour.cronEvery !== 'every' &&
    state.second.cronEvery === 'every' &&
    state.minute.cronEvery === 'every' &&
    (state.day.cronEvery === 'every' || state.day.cronEvery === 'unspecified') &&
    (state.month.cronEvery === 'every' || state.month.cronEvery === 'unspecified') &&
    state.week.cronEvery === 'unspecified' &&
    (state.year.cronEvery === 'unspecified' || state.year.cronEvery === 'every');
});

const isOnlyDayChanged = computed(() => {
  return (state.day.cronEvery !== 'every' && state.day.cronEvery !== 'unspecified') &&
    state.second.cronEvery === 'every' &&
    state.minute.cronEvery === 'every' &&
    state.hour.cronEvery === 'every' &&
    (state.month.cronEvery === 'every' || state.month.cronEvery === 'unspecified') &&
    state.week.cronEvery === 'unspecified' &&
    (state.year.cronEvery === 'unspecified' || state.year.cronEvery === 'every');
});

const isOnlyMonthChanged = computed(() => {
  return (state.month.cronEvery !== 'every' && state.month.cronEvery !== 'unspecified') &&
    state.second.cronEvery === 'every' &&
    state.minute.cronEvery === 'every' &&
    state.hour.cronEvery === 'every' &&
    (state.day.cronEvery === 'every' || state.day.cronEvery === 'unspecified') &&
    state.week.cronEvery === 'unspecified' &&
    (state.year.cronEvery === 'unspecified' || state.year.cronEvery === 'every');
});

const isOnlyYearChanged = computed(() => {
  return (state.year.cronEvery !== 'unspecified' && state.year.cronEvery !== 'every') &&
    state.second.cronEvery === 'every' &&
    state.minute.cronEvery === 'every' &&
    state.hour.cronEvery === 'every' &&
    (state.day.cronEvery === 'every' || state.day.cronEvery === 'unspecified') &&
    (state.month.cronEvery === 'every' || state.month.cronEvery === 'unspecified') &&
    state.week.cronEvery === 'unspecified';
});

// 计算表达式表格数据
const expressionData = computed(() => {
  const data: any = {};
  fields.forEach(field => {
    data[field.name] = getFieldValue(field.name);
  });
  return data;
});

const getFieldValue = (field: string): string => {
  const config = (state as any)[field];
  const formatNumber = (numStr: string): string => {
    const num = parseInt(numStr, 10);
    return isNaN(num) ? numStr : num.toString();
  };

  switch (config.cronEvery) {
    case 'every':
      // 根据只改变某个字段的情况来替换 * 为 0
      if (field === 'second') {
        // 如果只改变分、时、天、月、年，秒要变成0
        if (isOnlyMinuteChanged.value || isOnlyHourChanged.value ||
          isOnlyDayChanged.value || isOnlyMonthChanged.value || isOnlyYearChanged.value) {
          return '0';
        }
      } else if (field === 'minute') {
        // 如果只改变时、天、月、年，分要变成0
        if (isOnlyHourChanged.value || isOnlyDayChanged.value ||
          isOnlyMonthChanged.value || isOnlyYearChanged.value) {
          return '0';
        }
      } else if (field === 'hour') {
        // 如果只改变天、月、年，时要变成0
        if (isOnlyDayChanged.value || isOnlyMonthChanged.value || isOnlyYearChanged.value) {
          return '0';
        }
      } else if (field === 'day') {
        // 如果只改变月、年，天要变成0
        if (isOnlyMonthChanged.value || isOnlyYearChanged.value) {
          return '0';
        }
      } else if (field === 'month') {
        // 如果只改变年，月要变成0
        if (isOnlyYearChanged.value) {
          return '0';
        }
      } else if (field === 'year') {
        // 年选择每年时返回 *
        return '*';
      }
      return '*';

    case 'weekly':
      // 每周选项
      if (field === 'week') {
        return '*'; // 周字段返回 * 表示每周
      }
      // 其他字段保持原有逻辑，但避免递归调用
      if (field === 'second' || field === 'minute' || field === 'hour') {
        return '0';
      }
      if (field === 'day' || field === 'month' || field === 'year') {
        return '*';
      }
      return '*';

    case 'cycle':
      return `${formatNumber(config.cycleFrom.toString())}-${formatNumber(config.cycleTo.toString())}`;

    case 'interval':
      if (field === 'minute') {
        // 如果只改变分钟，并且是interval类型，生成 0/step 格式
        if (isOnlyMinuteChanged.value) {
          return `0/${formatNumber(config.intervalStep.toString())}`;
        }
        // 其他情况保持原来的逻辑
        if (config.intervalFrom === 0 && config.intervalStep === 1) {
          return '*';
        }
      }
      return `${formatNumber(config.intervalFrom.toString())}/${formatNumber(config.intervalStep.toString())}`;

    case 'specific':
      if (config.specificSpecific.length === 0) return '*';
      const formatted = config.specificSpecific.map((v: string) => formatNumber(v));
      return formatted.join(',');

    case 'workday':
      return `${formatNumber(config.workday.toString())}W`;

    case 'last':
      return 'L';

    case 'nth':
      return `${formatNumber(config.nthDay.toString())}#${formatNumber(config.nthWeek.toString())}`;

    case 'yearly':
      // 周的年每年选项，返回空字符串，在generateCron中特殊处理
      return '';

    case 'unspecified':
      if (field === 'week') return '?';
      if (field === 'day') return '?';
      if (field === 'month') return '?';
      if (field === 'year') return '';
      return '*';

    default:
      return '*';
  }
};

const generateCron = () => {
  try {
    let cronParts = fields.map(field => {
      const value = getFieldValue(field.name);
      return value;
    }).filter(value => value !== '');

    // 处理每周逻辑
    if (state.week.cronEvery === 'weekly') {
      // 每周选项：设置为每周执行，其他字段保持用户选择
      // 不需要特殊处理，因为周的字段会返回 '*'
    }

    // 移除原有的每年逻辑（如果不需要的话）
    // if (state.week.cronEvery === 'yearly') {
    //   cronParts = ['0', '0', '0', '1', '1', '?', '*'];
    // }

    state.generatedCron = cronParts.join(' ');
    state.errorMessage = '';

    // 验证日和周的冲突
    if (state.week.cronEvery !== 'yearly') { // 如果有每年逻辑的话保留这个判断
      const dayIndex = fields.findIndex(f => f.name === 'day');
      const weekIndex = fields.findIndex(f => f.name === 'week');
      const dayValue = cronParts[dayIndex];
      const weekValue = cronParts[weekIndex];

      if (dayValue !== '?' && weekValue !== '?') {
        state.errorMessage = '日和周不能同时指定具体值，其中一个必须为?';
      }
    }
  } catch (error) {
    state.errorMessage = '生成表达式时出现错误';
  }
};

const parseCron = () => {
  try {
    const cron = state.generatedCron.trim();

    // 验证基本的 cron 表达式格式
    if (!cron) {
      state.errorMessage = 'Cron表达式不能为空';
      return;
    }

    const parts = cron.split(/\s+/);
    if (parts.length < 6 || parts.length > 7) {
      state.errorMessage = 'Cron表达式格式错误，应为6或7个字段';
      return;
    }

    // 根据字段数量调整解析逻辑
    let secondPart, minutePart, hourPart, dayPart, monthPart, weekPart, yearPart;

    if (parts.length === 6) {
      // 标准6字段格式: 分钟 小时 日 月 周 年
      [minutePart, hourPart, dayPart, monthPart, weekPart, yearPart] = parts;
      secondPart = '0'; // 默认秒为0
    } else {
      // 7字段格式: 秒 分钟 小时 日 月 周 年
      [secondPart, minutePart, hourPart, dayPart, monthPart, weekPart, yearPart] = parts;
    }

    // 检查是否为每年模式 (0 0 0 1 1 ? *)
    if (secondPart === '0' && minutePart === '0' && hourPart === '0' &&
      dayPart === '1' && monthPart === '1' && weekPart === '?' && yearPart === '*') {
      state.week.cronEvery = 'yearly';
      state.second.cronEvery = 'every';
      state.minute.cronEvery = 'every';
      state.hour.cronEvery = 'every';
      state.day.cronEvery = 'every';
      state.month.cronEvery = 'every';
      state.year.cronEvery = 'every';
      state.errorMessage = '';
      ElMessage.success('Cron表达式解析成功');
      return;
    }

    // 清除错误信息
    state.errorMessage = '';

    // 解析秒
    parseField(secondPart, 'second', 0, 59);

    // 解析分钟
    parseField(minutePart, 'minute', 0, 59);

    // 解析小时
    parseField(hourPart, 'hour', 0, 23);

    // 解析日
    parseDayField(dayPart);

    // 解析月
    parseField(monthPart, 'month', 1, 12);

    // 解析周
    parseWeekField(weekPart);

    // 解析年
    parseYearField(yearPart);

    ElMessage.success('Cron表达式解析成功');
  } catch (error) {
    state.errorMessage = `解析Cron表达式时出现错误: ${error}`;
    ElMessage.error('解析Cron表达式失败');
  }
};

// 通用字段解析函数
const parseField = (cronPart: string, field: string, min: number, max: number) => {
  const config = (state as any)[field];

  // 重置配置
  resetFieldConfig(field);

  if (cronPart === '*') {
    config.cronEvery = 'every';
    return;
  }

  // 处理间隔表达式: */5 或 0/5
  if (cronPart.includes('/')) {
    const [start, step] = cronPart.split('/');
    config.cronEvery = 'interval';
    config.intervalFrom = start === '*' ? min : parseInt(start, 10);
    config.intervalStep = parseInt(step, 10);
    return;
  }

  // 处理范围表达式: 1-5
  if (cronPart.includes('-')) {
    const [from, to] = cronPart.split('-');
    config.cronEvery = 'cycle';
    config.cycleFrom = parseInt(from, 10);
    config.cycleTo = parseInt(to, 10);
    return;
  }

  // 处理逗号分隔的多个值: 1,3,5
  if (cronPart.includes(',')) {
    const values = cronPart.split(',').map(v => {
      const num = parseInt(v, 10);
      return isNaN(num) ? v : num.toString().padStart(2, '0');
    });
    config.cronEvery = 'specific';
    config.specificSpecific = values;
    return;
  }

  // 处理单个数字
  const numValue = parseInt(cronPart, 10);
  if (!isNaN(numValue)) {
    config.cronEvery = 'specific';
    config.specificSpecific = [numValue.toString().padStart(2, '0')];
    return;
  }

  // 默认情况
  config.cronEvery = 'every';
};

// 解析日期字段（特殊处理）
const parseDayField = (cronPart: string) => {
  const config = state.day;
  resetFieldConfig('day');

  if (cronPart === '*') {
    config.cronEvery = 'every';
    return;
  }

  if (cronPart === '?') {
    config.cronEvery = 'unspecified';
    return;
  }

  if (cronPart === 'L') {
    config.cronEvery = 'last';
    return;
  }

  // 处理工作日: 15W
  if (cronPart.endsWith('W')) {
    const day = parseInt(cronPart.replace('W', ''), 10);
    config.cronEvery = 'workday';
    config.workday = day;
    return;
  }

  // 使用通用解析
  parseField(cronPart, 'day', 1, 31);
};

// 解析周字段（特殊处理）
const parseWeekField = (cronPart: string) => {
  const config = state.week;
  resetFieldConfig('week');

  if (cronPart === '*') {
    config.cronEvery = 'weekly'; // 修改这里：* 表示每周
    return;
  }

  if (cronPart === '?') {
    config.cronEvery = 'unspecified';
    return;
  }

  // 处理第N周的星期M: 2#3 (第3周的星期2)
  if (cronPart.includes('#')) {
    const [day, week] = cronPart.split('#');
    config.cronEvery = 'nth';
    config.nthDay = parseInt(day, 10);
    config.nthWeek = parseInt(week, 10);
    return;
  }

  // 处理最后一个星期X: L3 (最后一个星期三)
  if (cronPart.startsWith('L')) {
    const day = parseInt(cronPart.substring(1), 10);
    config.cronEvery = 'last';
    config.lastDay = day;
    return;
  }

  // 处理逗号分隔的多个星期值
  if (cronPart.includes(',')) {
    const values = cronPart.split(',').map(v => {
      const num = parseInt(v, 10);
      return isNaN(num) ? v : num.toString();
    });
    config.cronEvery = 'specific';
    config.specificSpecific = values;
    return;
  }

  // 处理单个数字
  const numValue = parseInt(cronPart, 10);
  if (!isNaN(numValue)) {
    config.cronEvery = 'specific';
    config.specificSpecific = [numValue.toString()];
    return;
  }

  // 默认情况
  config.cronEvery = 'unspecified';
};

// 解析年字段
const parseYearField = (cronPart: string) => {
  const config = state.year;
  resetFieldConfig('year');

  if (cronPart === '*' || cronPart === '') {
    config.cronEvery = 'every'; // 修改这里：每年选项
    return;
  }

  // 使用通用解析
  parseField(cronPart, 'year', 1970, 2099);
};

// 重置字段配置到默认值
const resetFieldConfig = (field: string) => {
  const defaults: any = {
    second: {
      cronEvery: 'every',
      cycleFrom: 1,
      cycleTo: 2,
      intervalFrom: 0,
      intervalStep: 1,
      specificSpecific: []
    },
    minute: {
      cronEvery: 'every',
      cycleFrom: 1,
      cycleTo: 2,
      intervalFrom: 0,
      intervalStep: 1,
      specificSpecific: []
    },
    hour: {
      cronEvery: 'every',
      cycleFrom: 0,
      cycleTo: 2,
      intervalFrom: 0,
      intervalStep: 1,
      specificSpecific: []
    },
    day: {
      cronEvery: 'every',
      cycleFrom: 1,
      cycleTo: 2,
      intervalFrom: 1,
      intervalStep: 1,
      workday: 1,
      specificSpecific: []
    },
    month: {
      cronEvery: 'every',
      cycleFrom: 1,
      cycleTo: 2,
      intervalFrom: 1,
      intervalStep: 1,
      specificSpecific: []
    },
    week: {
      cronEvery: 'unspecified',
      cycleFrom: 1,
      cycleTo: 2,
      nthWeek: 1,
      nthDay: 1,
      lastDay: 1,
      specificSpecific: []
    },
    year: {
      cronEvery: 'unspecified',
      cycleFrom: 2018,
      cycleTo: 2019
    }
  };

  Object.assign((state as any)[field], defaults[field]);
};

const copyCron = () => {
  navigator.clipboard.writeText(state.generatedCron).then(() => {
    ElMessage.success('Cron表达式已复制到剪贴板');
  });
};

// 初始化生成表达式
generateCron();
</script>

<style lang="scss" scoped>
.vue3-cron-plus-container {
  max-width: 1200px;
  margin: 0 auto;

  .el-row {
    margin-bottom: 10px;
  }

  .tabBody {
    padding: 10px;
  }

  .long {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .myScroller {
    max-height: 400px;
    overflow-y: auto;
  }

  .expression-section {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
  }

  .expression-header {
    margin-bottom: 15px;

    h3 {
      margin: 0;
      color: #303133;
    }
  }

  .expression-table {
    margin-bottom: 20px;
  }

  .field-value {
    font-family: 'Courier New', monospace;
    font-weight: bold;
  }

  .cron-result {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
  }

  .cron-expression-display {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .cron-string {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    padding: 4px 8px;
  }

  .error-message {
    margin-bottom: 10px;
  }

  .action-buttons {
    display: flex;
    gap: 10px;
  }
}
</style>